<template>
    <div class="goods-recommend">
        <div class="header">
            <i class="icon" />
            <span class="title">{{ title }}</span>
        </div>
        <Carousel :sliders="sliders" style="height:380px" auto-play />
    </div>
</template>
  
<script setup>
import { reqGetGoodsListAPI } from '@/apis/goods'
import { ref, onMounted } from 'vue'
  
const props = defineProps({
    cid: {
        type: Number,
        default: () => 0
    },
    title: {
        type: String,
        default: "猜你喜欢"
    },
    params: {
        type: Object,
        default: {}
    },
    size: {
        type: Number,
        default: 4
    },
})
  
onMounted(() => {
    getGoods()
})
  
const sliders = ref([])
const getGoods = async () => {
    const result = await reqGetGoodsListAPI({second_cid: props.cid, page_size: 16})
    if (result.code == 200) {
        // 每页4条
        const total = Math.ceil(result.data.goods.length / props.size)
        for (let i = 0; i < total; i++) {
            sliders.value.push(result.data.goods.slice(i * props.size, (i + 1) * props.size))
        }
    }
}
</script>
  
<style scoped lang='scss'>
:deep(.carousel-wrap) {
    height: 380px;
    .carousel {
        &-indicator {
            bottom: 30px;
            span {
                &.active {
                    background: $main-color;
                }
            }
        }
        &-btn {
            top: 110px;
            opacity: 1;
            background: rgba(0,0,0,0);
            color: #ddd;
            i {
                font-size: 30px;
            }
        }
    }
}
.goods-recommend {
    background: #fff;
    min-height: 460px;
    margin-top: 20px;
    .header {
        height: 80px;
        line-height: 80px;
        padding: 0 20px;
        .title {
            font-size: 20px;
            padding-left: 10px;
        }
        .icon {
            width: 16px;
            height: 16px;
            display: inline-block;
            border-top: 4px solid $main-color;
            border-right: 4px solid $main-color;
            box-sizing: border-box;
            position: relative;
            transform: rotate(45deg);
            &::before {
                content: "";
                width: 10px;
                height: 10px;
                position: absolute;
                left: 0;
                top: 2px;
                background: lighten($main-color, 40%);
            }
        }
    }
}
</style>